<script setup>
import { reactive } from 'vue'
// 逻辑代码
const tabbars = reactive([
    {
        title: '首页',
        to: {
            name: 'Home'
        },
        icon: 'home-o'
    },
    {
        title: '分类',
        to: {
            name: 'Category'
        },
        icon: 'apps-o'
    },
    {
        title: '购物车',
        to: {
            name: 'Cart'
        },
        icon: 'shopping-cart-o'
    },
    {
        title: '个人中心',
        to: {
            name: 'User'
        },
        icon: 'user-o'
    },
])
</script>

<template>
    <div>
        <van-tabbar fixed route>
            <van-tabbar-item v-for="(item, index) in tabbars" :to="item.to" :icon="item.icon" :key="index">
                {{ item.title }}
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<style scoped></style>